<template>
  <div class="boxs">
    <pageProcessSearch
      :proTotal="proTotal"
      @filterResult="filterResult"
      @changeList="changeList"
      @filterAttr="filterAttr"
    />
    <pageProcessList ref="pageProcessListRef" :filterCont="filterCont" @backTotal="backTotal" />
    <pageDetailControl ref="controlRef"/>
  </div>
</template>

<script lang="ts" setup>
let proTotal = ref(0);
let filterCont = ref("");
let controlRef = ref();

const backTotal = (num: number) => {
  proTotal.value = num || 0;
};
const pageProcessListRef = ref();
type Tsearch = {
  id: number;
  parentId: number;
};
type keys = {
  [key: string]: string;
};
const changeList = (key:{choseList:Tsearch[]}) => {
  const keys = {} as keys;
  key.choseList.forEach((item: Tsearch) => {
    keys[item.id] = '0';
  });
  let objs = {
    keys:keys,
    ...key
  }
  pageProcessListRef.value.hanldeChangeFilteredResult(objs);
};
const filterAttr = (key: Tsearch[]) => {
  const keys = {} as keys;
  key.forEach((item: Tsearch) => {
    keys[item.id] = '0';
  });
  pageProcessListRef.value.hanldeChangeFilteredAttr(keys);
};
const filterResult = (num: string) => {
  filterCont.value = num;
  pageProcessListRef.value.hanldeChangeFilteredResult([]);
};
type Tseo = {
  headTag: string;
  keyword: string;
  mainKeyword: string;
  meta: string;
};
type Tpage = {
  name: string;
  seoDTO: Tseo;
};
const getPage = async () => {
  const { data } = await useServerFetch<Tpage>("/app-api/promotion/diy-page/getByCode", {
    method: "get",
    query: {
      code: "product",
    },
  });
  controlRef.value.init(1);
  useHead({
    title: data.name,
    meta: [
      {
        hid: data?.seoDTO?.keyword,
        name: data?.seoDTO?.mainKeyword,
        content: data?.seoDTO?.keyword + "," + data?.seoDTO?.meta + "," + data?.seoDTO?.headTag,
      },
    ],
  });
};
onMounted(() => {
  getPage();
});
</script>

<style lang="stylus" scoped>
.boxs{
  width:1080px
  margin:0 auto
  padding-bottom 65px
}
</style>
